<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>详情页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
    <link rel="stylesheet" href="/css/typo.css">
    <link rel="stylesheet" href="/css/animate.css">
    <link rel="stylesheet" href="/css/my01.css">
    <link rel="stylesheet" href="/lib/lib/tocbot/tocbot.css">
</head>
<body>
 <!--导航条-->
 <nav class="ui segment inverted attached">
 <div class="ui container">
     <div class="ui inverted menu secondary stackable">
         <h2 class="ui teal header item">logo</h2>
         <a th:href="@{/}" class="m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
         <a th:href="@{/types/-1}" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
         <a th:href="@{/tags/-1}" class="m-item item m-mobile-hide" ><i class="tags icon"></i>标签</a>
         <a th:href="@{/archives}" class="m-item item m-mobile-hide" ><i class="clone icon"></i>归档</a>
         <a  th:href="@{/about}" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>
         <div class="right m-item item m-mobile-hide">
         <div class="ui icon inverted transparent input m-margin-tb-tiny">
             <!--全局搜索-->
             <form name="search" action="#" th:action="@{/search}" method="post" target="_blank">
                 <div class="ui icon inverted transparent input m-margin-tb-tiny">
                     <input type="text" name="query" placeholder="Search...." th:value="${query}">
                     <i onclick="document.forms['search'].submit()" class="search link icon"></i>
                 </div>
             </form>
         </div>
         </div>
     </div>
 </div>
     <a href="" class="black t_menu icon ui button m-mobile-show m-right-top ">
         <i class="sidebar icon"></i>
     </a>
 </nav>
 <!--中间部分-->
  <div class="m-container-small m-padded-tb-big animated pulse">
      <div class="ui container" th:object="${blog}">
          <!--头部-->
          <div class="ui segment top attached">
              <div class="ui horizontal link list">
                  <div class="item">
                      <img src="" alt="" class="ui avatar image">
                      <div class="content"><a href="" class="header" th:text="${blog.user.nickname}">kendi</a></div>
                  </div>
                  <div class="item">
                      <i class="calendar icon"></i>
                      <span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}"></span>
                  </div>
                  <div class="item">
                      <i class="eye icon"></i>
                      <span th:text="${blog.views}"></span>
                  </div>
              </div>
          </div>
          <!--图片区域-->
          <div class="ui attached segment">
              <img th:src="${blog.firstPicture}" alt="" class="ui fluid rounded image" style="width: 800px;height: 450px">
          </div>
          <!-- 内容-->
          <div class="ui attached segment">
              <!--flag-->
              <div class="ui segment right aligned">
                  <div class="ui label teal basic">
                      <span th:text="${blog.flag}"></span>
                  </div>
                       <!--文本内容-->
                  <h2 class="ui center aligned header" th:text="${blog.title}">关于刻意练习的清单</h2>
                  <br>

                  <div id="content" th:utext="${blog.content}" class="typo  typo-selection js-toc-content m-padded-lr-responsive m-padded-tb-large">
                  </div>
                  <!--标签-->
                  <!--标签-->
                  <div class="m-padded-lr-responsive">
                      <div class="ui basic teal left pointing label" th:each="tag : ${blog.tags}" th:text="${tag.name}">方法论</div>
                  </div>
                  <!--赞赏-->
                 <div class="ui center aligned basic segment">
                     <button id="payButton" class="ui pink basic button mini">赞赏</button>
                 </div>
                  <div class="ui payQR flowing popup transition hidden">
                      <div class="ui pink basic label">
                          <div class="ui images" style="font-size: inherit !important;">
                              <div class="image">
                                  <img src="/images/wechat.jpg" alt="" class="ui rounded bordered image" style="width: 120px">
                                  <div>支付宝</div>
                              </div>
                              <div class="image">
                                  <img src="/images/wechat.jpg" alt="" class="ui rounded bordered image" style="width: 120px">
                                  <div>微信</div>
                              </div>
                          </div>
                      </div>
                  </div>

              </div>
          </div>
          <!-- 博客信息-->
          <div class="ui attached message positive">
             <div class="ui grid">
                 <div class="thirteen wide column">
                     <ui class="list">
                         <li><a href="" >作者：kendi（联系作者）</a></li>
                         <li><a href="">发表时间：2019-9-27 09:08</a></li>
                         <li><a href="">邮箱：zypze@163.cn</a></li>
                     </ui>
                 </div>
                 <div class="three wide column m-mobile-wide">
                     <img src="/images/img02.jpg" class="ui right floated rounded bordered image" style="width: 100px;height: 100px">
                 </div>
             </div>
          </div>
          <!-- 留言区域-->
          <div class="ui bottom attached segment">
              <!--文本留言区域-->
             <div class="ui form">
                 <div class="field ">
                     <textarea name="content" id="comment-container" placeholder="请输入你的评论信息..."></textarea>
                 </div>
                 <div class="fields">
                 <div class="field m-mobile-wide">
                     <div class="input left ui icon m-mobile-wide">
                         <i class="ui user icon"></i>
                         <input type="text" name="nickname" placeholder="姓名">
                     </div>
                 </div>
                     <div class="field m-mobile-wide">
                         <div class="input icon ui left m-mobile-wide">
                             <i class="icon mail ui"></i>
                             <input type="text" name="email" placeholder="邮箱">
                         </div>
                     </div>
                     <div class="field m-mobile-wide">
                         <div class="input icon ui right">
                             <i class="ui icon check"></i>
                             <button class="teal button ui m-mobile-wide">提交</button>
                         </div>
                     </div>
                 </div>
             </div>
          </div>
      </div>
  </div>
        <!--目录-->
 <div class="m-padded-mini">
         <div class="ui vertical icon buttons m-fixed m-right-bottom">
             <button type="button" class="ui toc teal button  ">目录</button>
             <a href="#comment-container" class="ui teal button ">留言</a>
             <button class="ui icon button wechat00 teal"><i class="weixin icon"></i></button>
             <a href="#toTopbutton" id="toTopbutton" class="ui button teal ">顶部</a>
         </div>
 </div>
 <div class="ui toc-container flowing popup transition hidden" style="width: 250px !important;">
     <ol class="js-toc">
     </ol>
 </div>
 <div id="qrcode" class="ui wechat-qr flowing popup transition hidden m-padded-tiny "style="width: 130px !important;">
     <!--<img src="./static/images/wechat.jpg" alt="" class="ui rounded image" style="width: 120px !important;">-->
     <!--<img src="images/img02.jpg" alt="" class="ui rounded image" style="width: 120px">-->
 </div>>
<!--页脚-->
 <footer class="ui inverted vertical segment">
     <div class="ui center aligned container">
         <div class="ui inverted divided stackable grid">
             <div class="three wide column">
                 <div class="ui link list inverted">
                     <div class="item">
                         <img src="images/img01.jpg" alt="" class="ui rounded image" style="width: 100px">
                     </div>
                 </div>
             </div>

             <div class="three wide column">
                 <h4 class="ui inverted header">最新博客</h4>
                 <div class="ui inverted link list" th:each="b:${pages}">
                     <a href="#" class="item" th:text="${b.title}">用户故事(User Story)</a>
                 </div>
             </div>
             <div class="three wide column">
                 <h4 class="ui inverted header">联系我</h4>
                 <div class="ui inverted link list">
                     <a href="#" class="item">zypzw@163.cn</a>
                     <a href="#" class="item">QQ:1965199277</a>


                 </div>
             </div>
             <div class="seven wide column">
                 <h4 class="ui inverted header">
                     关于我
                 </h4>
                 <p>my name is zhangyuping,this is my personal blog</p>
             </div>
         </div>
         <div class="ui inverted section divider"></div>
         <p class="m-text-thin m-text-spaced m-opacity-mini">Copyright © 2019-9-27</p>
     </div>
 </footer>
</body>
   <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
   <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
   <script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
   <script src="/lib/lib/tocbot/tocbot.js"></script>
<script src="/lib/lib/qrcode/qrcode.min.js"></script>
<script type="text/javascript">
    $("#payButton").popup({
        popup:$(".payQR.popup"),
        on:'click',
        position:"bottom center"
    })
    $(".t_menu").click(function () {
        $(".m-item").toggleClass("m-mobile-hide");
    })
    $(".toc.button").popup({
      popup: $(".toc-container"),
        on : 'click',
        position: 'left center'
    });
    tocbot.init({
        // Where to render the table of contents.
        tocSelector: '.js-toc',
        // Where to grab the headings to build the table of contents.
        contentSelector: '.js-toc-content',
        // Which headings to grab inside of the contentSelector element.
        headingSelector: 'h1, h2, h3',
    })
    $(".wechat00.button").popup({
        popup:$(".wechat-qr"),
        on:'click',
        position:"bottom center"
    });
    var qrcode = new QRCode("qrcode", {
        text: "http://jindo.dev.naver.com/collie",
        width: 110,
        height: 110,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    });
    $('#toTopbutton').click(function () {
        $(window).scrollTo(0,500);
    });

</script>
</html>